#hover-color() {
	.red {
		&:hover {
			color: red;
			text-decoration: none;
		}
	}
}
#hover-mask() {
	.mask-hidden {
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		background-color: #fff;
		opacity: 0;
		z-index: 1;
		transition: 0.3s;
	}
	.mask-visible {
		&:hover {
			.mask {
				opacity: 0.3;
			}
		}
	}
}
#hover-font-color() {
	.delay {
		transition: 0.3s;
	}
}

body {
	font-size: 12px;
}
.icon {
	width: 1em;
	height: 1em;
	vertical-align: -0.15em;
	fill: currentColor;
	overflow: hidden;
}
#header {
	@nav_color: #999;
	font-size: 12px;
	color: @nav_color;
	.shortcut {
		background-color: #e3e4e5;
		.nav {
			overflow: hidden;
			height: 30px;
			line-height: 30px;

			> div {
				float: left;
			}
			.inner-1 {
				.font-icon {
					display: inline-block;
					font-size: 18px;
					vertical-align: middle;
				}
				a {
					display: inline-block;
					vertical-align: middle;
					color: #999;
					#hover-color.red();
				}
			}
			.inner-2 {
				margin-left: 30%;
				.login {
					color: #999;
					#hover-color.red();
				}
				.register {
					color: red;
				}
			}
			.inner-3 {
				overflow: hidden;
				float: right !important;
				> ul {
					vertical-align: middle;
					> li {
						float: left;
						margin: 0 10px;
						a {
							color: #aaa;
							&:hover {
								color: red;
								text-decoration: none;
								cursor: pointer;
							}
						}
					}
				}
			}
		}
	}
}
#main {
	> .logo-head {
		#logo-2014 {
			width: 362px;
			float: left;
			position: relative;
			padding: 20px 0;
			> a {
				display: inline-block;
				width: 180px;
				height: 70px;
				background: url("../images/logo-2014.png") no-repeat;
			}
			.extra {
				position: absolute;
				width: 80px;
				height: 30px;
				margin-right: 10px;
				border: 1px solid #ccc;
				font-size: 12px;
				font-weight: 400;
				top: 30px;
				left: 180px;
				text-align: center;
				line-height: 30px;
			}
		}
		#search-2014 {
			margin-top: 25px;
			float: left;
			width: auto;
			.form {
				height: 36px;
				overflow: hidden;
				.text {
					box-sizing: border-box;
					width: 446px;
					height: 36px;
					line-height: 36px;
					font-size: 14px;
					font-family: "microsoft yahei";
					outline: none;
					border-width: 2px 0 2px 2px;
					border-color: #b61d1d;
					border-style: solid;
					padding: 4px;
					float: left;
				}
				.btn {
					width: auto;
					height: 36px;
					padding: 0 8px;
					font: 12px simsun;
					box-sizing: border-box;
					float: left;
					border: none;
					border-radius: 0;
					padding: 0 8px;
					overflow: visible;
					color: #fff;
					cursor: pointer;
					background: #b61d1d;
				}
				.btn01 {
					background-color: #474e5c;
				}
			}
		}
		#settle-up-2014 {
			float: left;
			margin: 25px 65px 0 80px;
			height: 36px;
			.cw-icon {
				width: 75px;
				height: 34px;
				box-sizing: content-box;
				border: 1px solid #dfdfdf;
				padding: 0 28px 0 36px;
				background: #f9f9f9;
				text-align: center;
				line-height: 34px;
				position: relative;
				a {
					font-size: 12px;
					color: #666;
					#hover-color.red();
				}
				i {
					position: absolute;
				}
				.ci-left {
					top: 9px;
					left: 18px;
					width: 18px;
					height: 16px;
					background: url("../images/购物车精灵图.png") no-repeat 0 -58px;
				}
				.ci-right {
					top: 11px;
					right: 10px;
					width: 7px;
					height: 13px;
					overflow: hidden;
					font: 400 13px/13px simsun;
					color: #999;
				}
				.ci-count {
					top: -4px;
					left: 104px;
					padding: 1px 2px;
					font-size: 12px;
					line-height: 12px;
					color: #fff;
					background-color: #c81623;
					border-radius: 7px 7px 7px 0;
					min-width: 12px;
					text-align: center;
				}
			}
		}
		#hotwords {
			margin-top: 5px;
			float: left;
			a {
				color: #666;
				margin-right: 10px;
				#hover-color.red();
			}
		}
	}
	.shophead {
		width: 100%;
		height: 150px;
		.shophead-top {
			width: 100%;
			height: 110px;
			.jdzy {
				float: left;
				margin-left: 45px;
				img {
					display: block;
				}
			}
			.jdzy-follow {
				margin-top: 80px;
				margin-left: 10px;
				float: left;
				width: 127px;
				height: 22px;
				background: url("../images/jdzy-follow.png") no-repeat;
				position: relative;
				span {
					position: absolute;
					height: 22px;
					line-height: 22px;
					left: 10px;
					font-size: 12px;
					color: #fff;
					font-weight: bold;
				}
			}
			.item {
				height: 100%;
				overflow: hidden;
				float: left;
				margin-left: 30px;
				.img-container {
					float: left;
					img {
						display: block;
					}
				}
				.item-info {
					float: left;
					text-align: center;
					font-family: 微软雅黑;
					margin-left: 10px;
					.item-info-title {
						line-height: 24px;
						font-size: 12px;
						color: #313131;
						margin-top: 10px;
						span {
							color: #7e7e7e;
							margin-left: 10px;
						}
					}
					.item-info-detail {
						line-height: 20px;
						font-size: 16px;
						color: #f21921;
					}
					.item-info-tosee {
						margin-top: 10px;
						display: inline-block;
						width: 92px;
						height: 23px;
						background: url("../images/立即查看.png") no-repeat;
					}
				}
			}
		}
		.shophead-bottom {
			width: 100%;
			height: 40px;
			background-color: #333;
			font-size: 15px;
			.shophead-bottom-list {
				overflow: hidden;
				padding: 0 0 0 85px;
				text-align: center;
				.item {
					float: left;
					width: 82px;
					height: 30px;
					margin: 5px 5px;
					background: #333;
					border: 2px solid #333;
					box-sizing: border-box;
					border-radius: 50px;
					line-height: 26px;
					transition: 0.3s;
					a {
						display: block;
						width: 100%;
						height: 100%;
						color: #fff;
					}
					&:hover {
						background: #ed1c24;
						border-color: #e52f11;
					}
				}
				.msi {
					width: 135px;
				}
				.item-search {
					width: 120px;
					box-sizing: border-box;
					position: relative;
					float: left;
					height: 30px;
					margin: 5px 5px;
					background: #333;
					input {
						width: 120px;
						height: 30px;
						outline: none;
						font-size: 14px;
						color: #8e8e8e;
						background-color: #333;
						text-indent: 10px;
						text-align: left;
						box-sizing: border-box;
						border-radius: 50px;
						border: 1px solid #8e8e8e;
					}
					button {
						position: absolute;
						width: 24px;
						height: 25px;
						background: url("../images/放大镜.png") no-repeat;
						top: 2px;
						left: 92px;
						border: none;
						background-position: center;
						cursor: pointer;
					}
				}
			}
		}
	}
	> .product {
		.product-intro {
			overflow: hidden;
			.preview-wrap {
				width: 452px;
				float: left;
				.preview {
					position: relative;
					.main-img {
						box-sizing: content-box;
						width: 450px;
						height: 450px;
						position: relative;
						border: 1px solid #eee;
						margin-bottom: 20px;
						position: relative;
						img {
							position: absolute;
							top: 0;
							left: 0;
							width: 450px;
							height: 450px;
							display: none;
						}
						.display {
							display: block;
						}
						i {
							position: absolute;
							width: 30px;
							height: 30px;
							background: url("../images/product-sprite.png") no-repeat 0 -24px;
							bottom: 0;
							right: 0;
						}
					}
					.spec-list {
						position: relative;
						margin-bottom: 18px;
						> a {
							position: absolute;
							cursor: pointer;
							top: 50%;
							margin-top: -16px;
							width: 22px;
							height: 32px;
							i {
								display: block;
								width: 22px;
								height: 32px;
							}
							.prev {
								background: url("../images/product-sprite.png") no-repeat 0 -54px;
							}
						}
						.spec-backward {
							right: 0;
							.next {
								background: url("../images/product-sprite.png") no-repeat -80px 0;
							}
						}
						.spec-items {
							position: relative;
							width: 380px;
							height: 58px;
							margin: 0 auto;
							overflow: hidden;
							ul {
								position: absolute;
								width: 456px;
								height: 58px;
								overflow: hidden;
								li {
									float: left;
									margin: 0 9px;
									width: 54px;
									height: 54px;
									box-sizing: content-box;
									border: 2px solid #fff;
									img {
										width: 54px;
										height: 54px;
										display: block;
									}
								}
								.active {
									border-color: #e53e41;
								}
							}
						}
					}
					.preview-info {
						height: 20px;
						.left-btns {
							float: left;
							a {
								cursor: pointer;
								margin-right: 2px;
								color: #666;
								i {
									display: inline-block;
									vertical-align: middle;
									margin-right: 5px;
									background: url("../images/product-sprite.png") no-repeat;
								}
								.sprite-follow {
									width: 14px;
									height: 13px;
									background-position: -44px -40px;
								}
								.sprite-share {
									width: 15px;
									height: 14px;
									background-position: -45px -24px;
								}
								.sprite-compare {
									width: 15px;
									height: 16px;
									background-position: -30px -24px;
								}
							}
						}
						.right-btns {
							float: right;
							a {
								color: #666;
								#hover-color.red();
							}
						}
					}
					.purchase-op {
						padding-top: 30px;
						text-align: center;
						.volume-purchase {
							display: inline-block;
							line-height: 26px;
							padding: 0 16px;
							border: 1px solid #ccc;
							color: #666;
							&:hover {
								border-color: red;
							}
						}
					}
				}
			}
			.itemInfo-wrap {
				width: 738px;
				margin-left: 20px;
				float: left;
				.sku-name {
					font: 700 16px Arial, "microsoft yahei";
					color: #666;
					padding-top: 10px;
					line-height: 28px;
					margin-bottom: 5px;
				}
				.news {
					color: #e4393c;
					margin-bottom: 5px;
					.item-hide {
						margin-bottom: 5px;
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
						max-height: 1.5em;
						line-height: 1.5em;
						a {
							color: #5e69ad;
							text-decoration: underline;
						}
					}
				}
				.summary-first {
					padding-bottom: 5px;
					box-sizing: content-box;
					position: relative;
					.summary-price-wrap {
						background: #f3f3f3;
						padding-top: 10px;
						box-sizing: content-box;
						.summary-price {
							box-sizing: content-box;
							position: relative;
							margin-bottom: 5px;
							float: left;
							.dt {
								box-sizing: content-box;
								float: left;
								padding-left: 10px;
								font-family: simsun;
								color: #999;
								line-height: 22px;
							}
							.dd {
								margin-left: 70px;
								.p-price {
									overflow: hidden;
									color: #e4393c;
									font-family: "microsoft yahei";
									margin-right: 10px;
									span {
										font-size: 16px;
										vertical-align: middle;
									}
									.price {
										font-size: 22px;
										line-height: 18px;
									}
								}
								.notice {
									color: #005aa0;
									vertical-align: -2px;
									#hover-color.red();
								}
							}
						}
						.summary-info {
							float: right;
							right: 10px;
							top: 8px;
							color: #999;
							margin-right: 10px;
						}
					}
				}
				.p-choose-wrap {
					position: relative;
					.summary-support {
						line-height: 32px;
						overflow: hidden;
						.dt {
							float: left;
							padding-left: 10px;
							font-family: simsun;
							color: #999;
						}
						.dd {
							float: left;
							height: 32px;
							line-height: 32px;
							position: relative;
							margin-left: 5px;
							i {
								position: absolute;
								width: 16px;
								height: 16px;
								background: url("../images/sprite-old2new.png") no-repeat;
								background-position: 0 -32px;
								top: 8px;
								left: 0;
							}
							span {
								border: 1px solid #ced2e6;
								border-radius: 8px;
								padding: 0 5px 0 18px;
							}
						}
					}
					.summary-stock {
						margin-top: 5px;
						overflow: hidden;
						.dt {
							float: left;
							padding-left: 10px;
							font-family: simsun;
							color: #999;
							line-height: 26px;
						}
						.dd {
							float: left;
							line-height: 26px;
							.area {
								float: left;
								overflow: hidden;
								margin-left: 10px;
								.area-text-wrap {
									position: relative;
									top: 0;
									background: #fff;
									border: 1px solid #cecbce;
									padding: 0 24px 0 4px;
									line-height: 23px;
									overflow: hidden;
									b {
										position: absolute;
										background: url("../images/sprite-arrow.png") no-repeat 3px 5px;
										top: 3px;
										right: 4px;
										width: 17px;
										height: 17px;
									}
								}
							}
							.store-promt {
								float: left;
								margin: 0 10px;
								color: #999;
							}
							.promise-icon {
								float: left;
								> div {
									float: left;
								}
								.service {
									margin-left: 10px;
									.title {
										color: #646fb0;
										font-size: 12px;
										word-break: keep-all;
									}
									i {
										margin: 0 8px;
									}
									a {
										color: #646fb0;
										font-size: 12px;
										word-break: keep-all;
									}
								}
							}
						}
					}
					.purchase {
						overflow: hidden;
						line-height: 24px;
						margin-left: 70px;
						margin-top: 10px;
						> * {
							float: left;
						}
						.icon-w1 {
							width: 86px;
							height: 16px;
							background: url("../images/jdwl.png") no-repeat;
							background-size: 100%;
							margin-top: 3px;
						}
						.service-more {
							margin-left: 10px;
							a {
								color: #646fb0;
								font-size: 12px;
								word-break: keep-all;
							}
							i {
								margin: 0 8px;
								color: #eaeaea;
							}
						}
					}
					.summary-supply {
						margin: 0 0 3px 70px;
						line-height: 32px;
						color: #999;
						.hl-red {
							color: #e4393c;
						}
						b {
							font-weight: bold;
						}
					}
					.summary-weight {
						margin-bottom: 3px;
						line-height: 32px;
						.dt {
							float: left;
							padding-left: 10px;
							font-family: simsun;
							color: #999;
						}
						.dd {
							margin-left: 70px;
						}
					}
					.summary-line {
						height: 0;
						overflow: hidden;
						border-bottom: 1px dotted #dfdfdf;
						margin-bottom: 15px;
					}
					.choose-attrs {
						margin-bottom: 10px;
						line-height: 40px;
						overflow: hidden;
						.dt {
							float: left;
							padding-left: 10px;
							font-family: simsun;
							color: #999;
						}
						.dd {
							overflow: hidden;
							// float: left;
							margin-left: 70px;
							.item {
								float: left;
								background-color: #f7f7f7;
								margin-right: 7px;
								margin-bottom: 4px;
								a {
									border: 1px solid #ccc;
									display: block;
									white-space: nowrap;
									color: #999;
									&:hover {
										border-color: red;
									}
									img {
										display: inline-block;
										vertical-align: middle;
									}
									i {
										display: inline-block;
										vertical-align: middle;
										margin: 0 8px;
									}
								}
							}
						}
					}
					.choose-serviceyc {
						margin-bottom: 7px;
						line-height: 18px;
						overflow: hidden;
						.dt {
							float: left;
							padding-left: 10px;
							font-family: simsun;
							color: #999;
							line-height: 30px;
						}
						.dd {
							margin-left: 70px;
							.yb-item-cat {
								float: left;
								color: #666;
								.yb-item {
									float: left;
									padding: 4px 5px 4px 6px;
									margin: 0 7px 2px 0;
									border: 1px solid #ccc;
									line-height: 20px;
									position: relative;
									font-size: 0;
									cursor: pointer;
									&:hover {
										border-color: red;
									}
									img {
										width: 16px;
										height: 16px;
										margin-right: 4px;
										display: inline-block;
										vertical-align: middle;
									}
									i {
										width: 15px;
										height: 10px;
										display: inline-block;
										vertical-align: middle;
										background: url("../images/service-icon.png") no-repeat -2px -1px;
									}
									span {
										font-size: 12px;
										margin-right: 4px;
										vertical-align: middle;
									}
								}
							}
							.service-tips {
								position: relative;
								float: left;
								a {
									display: inline-block;
									width: 16px;
									height: 16px;
									background: url("../images/__sprite.png") no-repeat;
									background-position: 0 0;
									vertical-align: -10px;
								}
							}
						}
					}
					.choose-btns {
						overflow: hidden;
						margin-top: 10px;
						margin-bottom: 20px;
						padding: 0 10px;
						.choose-amount {
							width: 58px;
							height: 44px;
							overflow: hidden;
							border: 1px solid #ccc;
							position: relative;
							margin-right: 10px;
							float: left;
							input {
								display: block;
								width: 43px;
								height: 42px;
								line-height: 42px;
								position: absolute;
								top: 1px;
								left: 0;
								border: 0;
								text-align: center;
							}
							a {
								display: block;
								width: 15px;
								text-align: center;
								height: 22px;
								line-height: 22px;
								overflow: hidden;
								background: #f1f1f1;
								color: #666;
								position: absolute;
								right: -1px;
								border: 1px solid #ccc;
							}
							.btn-reduce {
								bottom: -1px;
							}
						}
						#incart {
							margin-right: 10px;
							float: left;
							height: 46px;
							line-height: 46px;
							padding: 0 26px;
							font-size: 18px;
							font-family: "microsoft yahei";
							background-color: #df3033;
							color: #fff;
							text-align: center;
							vertical-align: middle;
							cursor: pointer;
						}
					}
					.summary-tips {
						margin-bottom: 50px;
						.dt {
							float: left;
							padding-left: 10px;
							font-family: simsun;
							color: #999;
						}
						.dd {
							margin-left: 70px;
							margin-right: 15px;
							font-family: simsun;
							color: #999;
						}
					}
				}
			}
		}
	}
}
